<template>
	<view class="tui-safe-area">
		<view v-if="addressList.length" class="tui-address">
			<block v-for="(item, index) in addressList" :key="index">
				<view class="tui-address-flex">
					<!-- <view v-if="" class="avatar">{{ getFirst(item.realName) }}</view> -->
					<!-- <view class="avatar gray">{{ getFirst(item.realName) }}</view> -->
					<view @click="handleNavAdd(item)" style="padding-left: 30upx;" class="tui-address-left">
						<view class="tui-address-main">
							<view class="tui-address-name tui-ellipsis">{{ item.realName }}</view>
							<view class="tui-address-tel">{{ item.mobilePhone }}</view>
						</view>
						<view class="tui-address-detail">
							<view class="tui-address-label" v-if="item.defaultFlag === 'y'">默认</view>
							<!-- <view class="tui-address-label" v-if="index != 2">{{ ['公司', '住宅', '其它'][index] }}</view> -->
							<text>{{ item.province + item.city + item.district + item.addressDetail }}</text>
						</view>
					</view>
					<view v-if="type == 'select'" class="tui-address-imgbox"><image class="tui-address-img" src="/static/images/mall/my/icon_addr_edit.png" /></view>
					<view v-else class="action">
						<view @click="handleSetDefault(item)" class="action-left">
							<text v-if="item.defaultFlag === 'y'"></text>
							设置为默认
						</view>
						<view class="action-right">
							<view @click="handleDel(item)" class="action-icon">删除</view>
							<view @click="handleNavAdd(item)" class="action-icon">修改</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<tui-no-data imgUrl="/static/images/toast/img_nodata.png" v-if="!addressList.length">暂无地址</tui-no-data>
		<!-- 新增地址 -->
		<view class="tui-address-new"><tui-button shadow type="primary" height="88rpx" @click="handleNavAdd(false)">+ 新增收货地址</tui-button></view>
	</view>
</template>

<script>
import { addressList, setDefault, addressdel } from '@/service/address.js';
export default {
	data() {
		return {
			addressList: [],
			type: ''
		};
	},
	onLoad: function(options) {
		if (options.type == 'select') {
			this.type = 'select';
		}
	},
	onShow: function() {
		this.getList();
	},
	methods: {
		getFirst(item) {
			return item ? item.substr(0, 1) : '';
		},
		async getList() {
			try {
				uni.showLoading({});
				this.addressList = await addressList();
			} finally {
				uni.hideLoading();
				//TODO handle the exception
			}
		},

		async handleDel({ id }) {
			uni.showModal({
				content: '确定删除？',
				complete: async ({ confirm }) => {
					if (confirm) {
						await addressdel({ id }, { loading: true });
						this.getList();
					}
				}
			});
		},
		async handleSetDefault({ id, defaultFlag }) {
			if (defaultFlag == 'n') {
				await setDefault({ id }, { loading: true });
				this.getList();
			}
		},
		handleNavAdd(item) {
			if (item) {
				if (this.type == 'select') {
					this.$store.commit('selectaddress', item);
					uni.navigateBack({});
				} else {
					uni.navigateTo({
						url: '../editAddress/editAddress?item=' + JSON.stringify(item)
					});
				}
			} else {
				uni.navigateTo({
					url: '../editAddress/editAddress'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.tui-address {
	width: 710upx;
	margin: 0 auto;
	padding-top: 20rpx;
	padding-bottom: 160rpx;
}
.tui-address-flex {
	flex-direction: column;
	padding: 20upx 0;
	background-color: #ffffff;
	box-sizing: border-box;
	margin-bottom: 20upx;
	display: flex;
	// justify-content: space-between;
	// align-items: center;
}

.tui-address-main {
	width: 600rpx;
	height: 70rpx;
	// margin: 0 auto;
	display: flex;

	font-size: 34rpx;
	line-height: 86rpx;
	padding-left: 0rpx;
}

.tui-address-name {
	width: 120rpx;
	height: 60rpx;
}

.tui-address-tel {
	margin-left: 10rpx;
}

.tui-address-detail {
	font-size: 28rpx;
	word-break: break-all;
	padding-bottom: 25rpx;
	color: #6c6c6c;
	// padding-left: 25rpx;
	padding-right: 120rpx;
}

.tui-address-label {
	padding: 5rpx 8rpx;
	flex-shrink: 0;
	background: $primary;
	border-radius: 6rpx;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 25rpx;
	line-height: 25rpx;
	transform: scale(0.8);
	transform-origin: center center;
	margin-right: 6rpx;
}

.tui-address-imgbox {
	width: 80rpx;
	height: 100rpx;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	right: 10rpx;
}

.tui-address-img {
	width: 36rpx;
	height: 36rpx;
}

.tui-address-new {
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 999;
	padding: 20rpx 25rpx 30rpx;
	box-sizing: border-box;
	background: #fafafa;
}

.tui-safe-area {
	padding-bottom: env(safe-area-inset-bottom);
}
.avatar {
	position: absolute;
	left: 20upx;
	top: 34upx;
	text-align: center;
	line-height: 50upx;
	color: #ffffff;
	background-color: $primary;
	border-radius: 50%;
	height: 50upx;
	width: 50upx;
}
.gray {
	background-color: #d5d4d4;
}
.action {
	display: flex;
	justify-content: space-between;
	font-size: 22upx;
	padding: 0 20upx;
}
.action-left {
	align-items: center;
	margin-left: 10upx;
	display: flex;
	text {
		margin-right: 10upx;
		border-radius: 50%;
		width: 30upx;
		height: 30upx;
		background: $primary;
	}
}
.action-right {
	display: flex;
}
.action-icon {
	margin-left: 20upx;
	border: 1upx solid #b5b5b5;
	padding: 6upx 14upx;
	border-radius: 8upx;
}
.tui-btn-primary {
	background-color: $primary !important;
}
</style>
